<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>ws-pakho</title>
<script th:src="@{js/sockjs.min.js}"></script>
<script th:src="@{js/stomp.js}"></script>
<script th:src="@{js/jquery-3.1.1.js}"></script>
</head>
<body>
    <blockquote class="layui-elem-quote">/topic-message</blockquote>
    <div id="main-content" class="container">
        <div class="row">
            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="connect">WebSocket connection:</label>
                        <button id="connect" class="btn btn-default" type="submit">Connect</button>
                        <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                        </button>

                    </div>
                </form>
            </div>
            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="name">Message</label>
                        <input type="text" id="name" class="form-control" placeholder="Your name here..."></input>
                    </div>
                    <button id="send" class="btn btn-default" type="submit">Send</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table id="conversation" class="table table-striped">
                    <thead>
                    <tr>
                        <th>Greetings</th>
                    </tr>
                    </thead>
                    <tbody id="greetings">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        //  /msg/sendcommuser
        var stompClient = null;
        //传递用户key值
        var login = "pakho";
        function setConnected(connected) {
            $("#connect").prop("disabled", connected);
            $("#disconnect").prop("disabled", !connected);
            if (connected) {
                $("#conversation").show();
            }
            else {
                $("#conversation").hide();
            }
            $("#greetings").html("");
        }

        function connect() {
            var socket = new SockJS('/endpoint');
            stompClient = Stomp.over(socket);
            stompClient.connect({login:login}, function (frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/greetings', function (response) {
//                 stompClient.subscribe('/user/topic/greetings', function (greeting) {
                	console.log('pakho response:' + response);
                	showGreeting(JSON.parse(response.body));
                });
//                 stompClient.subscribe('/topic/greetings', function (response) {
                stompClient.subscribe('/user/topic/greetings', function (response) {
                	console.log('pakho response:' + response);
                	showGreeting(JSON.parse(response.body));
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }

        function sendName() {
        	console.log("sendName");
            stompClient.send("/sendone", {}, JSON.stringify({
            	'from':"pakho",
            	'to':'rose',
            	'message':$("#name").val()
            	}));
        }


        function showGreeting(message) {
			$("#greetings").append("<tr><td>From:" + message.from +"--Message:"+message.message+ "</td></tr>");
        }

        $(function () {
            $("form").on('submit', function (e) {
                e.preventDefault();
            });
            $( "#connect" ).click(function() { connect(); });
            $( "#disconnect" ).click(function() { disconnect(); });
            $( "#send" ).click(function() { sendName(); });
        });
    </script>
</body>
</html>